<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="always" name="referrer">
    <meta name="keywords" content="网页关键词 必填">
    <meta name="description" content="网页描述 必填">
    <meta itemprop="name" content="QQ分享标题 必填">
    <meta itemprop="image" content="QQ分享图片链接 可选（不填则删除）">
    <meta name="description" itemprop="description" content="QQ分享描述 必填">
    <title>Vue</title>
    <link rel="stylesheet" href="assets/css/base-435979f7.css">
    <link rel="stylesheet" href="assets/css/plugin-3c050058.css">
    <script src="assets/vendor-738c3246.js"></script>
</head>
<body>
    <div class="reveal">
        <div class="slides">
            <section>
                <img src="assets/images/logo.png">
                <h1>Vue.js</h1>
                <a href="http://cn.vuejs.org/">http://cn.vuejs.org/</a>
            </section>
            <section>
                <section>
                    <h1>Vue.js</h1>
                    <ul>
                        <li>作者：尤雨溪  @尤小右</li>
                        <li>国内使用：阿里、美团、饿了么、苏宁易购、稀土掘金等</li>
                        <li>数据驱动+组件化</li>
                    </ul>
                </section>
                <section>
                    <img src="assets/images/xtjj.png">
                </section>
            </section>
            <section>
                <section>
                    <div id="demo">
                        {{msg}}
                    </div>
                    <div class="code">
                        <pre><code>
                            var vm = new Vue({
                                el: '#demo',
                                data: {
                                    msg: 'Hello World'
                                }
                            });
                            
                            {{msg}}

                            &lt;p v-text="msg"&gt;&lt;/p&gt;
                        </code></pre>
                    </div>
                </section>
                <section>
                    <div id="demo1">
                        <p>{{msg}}</p>
                        <input type="text" v-model="msg">
                    </div>
                    <div class="code">
                        <pre><code>
                            var vm1 = new Vue({
                                el: '#demo1',
                                data: {
                                    msg: 'Hello World'
                                }
                            })
                            &lt;p v-text="msg"&gt;&lt;/p&gt;
                            &lt;input type="text" v-model="msg" &gt;
                        </code></pre>
                    </div>
                </section>
                <section>
                    <pre><code>
                        &lt;p v-if="flag"&gt;Hi~
                        &lt;p v-show="flag"&gt;Hi~
                        &lt;a v-on:click="fn"&gt;
                        &lt;div v-bind:id="bindId"&gt;
                        &lt;img v-bind:src="imgSrc"&gt;
                        &lt;div v-bind:class="{ active: isActive }"&gt;
                        &lt;li v-for="item in items"&gt;
                    </code></pre>
                </section>
            </section>
            <section>
                <section>
                    <h1>数据驱动</h1>
                    <h4>Data-Driven</h4>
                </section>
                <section>
                    <img src="assets/images/oldMvc.png">
                </section>
                <section>
                    <img src="assets/images/mvvm2.png">
                </section>
                <section>
                    <img src="assets/images/mvvm.png">
                </section>
                <section>
                    <img src="assets/images/codeMvvm.png">
                </section>
            </section>  
            <section>
                <section>
                    <h1>组件化</h1>
                    <h4>Component-Oriented</h4>
                </section>                
                <section>
                    <img src="assets/images/components0.png">
                </section>
                <section>
                    <img src="assets/images/components1.png">
                </section>
                <section>
                    <img src="assets/images/components2.png">
                </section>
                <section>
                    <img src="assets/images/regCom1.png">
                </section>
                <section>
                    <img src="assets/images/regCom2.png">
                </section>
            </section>       
            <section>
                <img src="assets/images/advantage.png">
            </section>
            <section>
                <h3>Thanks</h3>
                <img src="assets/images/zick.gif" alt="">
            </section>
        </div>
    </div>
    <script src="assets/plugins-34590371.js"></script>
    <script src="assets/main.js"></script>
    <script>var vm=new Vue({el:"#demo",data:{msg:"Hello World"}}),vm1=new Vue({el:"#demo1",data:{msg:"Hello World"}})</script>
</body>
</html>